<template>
  <div class="wrap">
			<div class="banner2">
				<mt-swipe :auto="4000">
					<mt-swipe-item>
						<img src="../../assets/image/message.jpg">
					</mt-swipe-item>
				</mt-swipe>
			</div>
			<div class="forum-content">
				<div class="forum-pub" v-for="(item, index) in dataList" :key="index">
					<h1>{{item.nickname}}</h1>
					<div class="forum-time">{{item.ctime}}</div>
					<p>{{item.content}}</p>
					<div class="forum-name">
						<span class="cur" @click="reply(item)">
							<i class="iconfont icon-xiugai-copy"></i>{{item.text}}
						</span>
						<div class="forum-input" v-if="item.id == idstate">
							<textarea name="" id="" cols="20" rows="4" v-model="repcontent"  placeholder=""></textarea>
							<span class="setforum-btn2" @click="upReply(item)">提交</span>
						</div>
					</div>
					<div class="forum-message-list" v-if="item.children != ''">
						<div class="forum-message" v-for="(items, indexb) in item.children" :key="indexb">
							<p>回复：{{items.content}}</p>
							<span>{{items.ctime}}</span>
						</div>
					</div>
				</div>
			</div>
			<bottom></bottom>
  </div>
</template>

<script>
import bottom from './bottom'
export default {
	components: {
     bottom
  },
  data () {
    return {
		dataList: [],
		idstate: '',
		repcontent: ''
    }
  },
  methods: {
	  reply: function (item) {
		  if(item.state === 0) {
			  this.idstate = item.id
			  item.state = 1
			  item.text = '取消'
		  } else {
			  this.idstate = ''
			  item.state = 0
			  item.text = '回复'
		  }
	  },
	  getTime: function (timestamp) {
			var date = new Date(timestamp);
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			var D = date.getDate() + ' ';
			var h = date.getHours() + ':';
			var m = date.getMinutes() + ':';
			var s = date.getSeconds();
			return Y+M+D+h+m+s;
	  },
	  getData: function () {
		var that = this
		that.$axios.requestget('/page/comment')
			.then((res) => {
				that.dataList = res
				for (var i = 0; i < that.dataList.length; i++) {
					that.dataList[i].state = 0
					that.dataList[i].text = '回复'
					that.dataList[i].ctime = that.getTime(that.dataList[i].ctime)
					for (var j = 0; j < that.dataList[i].children.length; j++) {
						that.dataList[i].children[j].ctime = that.getTime(that.dataList[i].children[j].ctime)
					}
				}
			})
	  },
	  upReply: function (item) {
		  var that = this
		  if (that.repcontent === '') {
			  that.$axios.messageTwo('回复不能为空', '提示')
			  return false
		  }
		  that.$axios.request('post','/page/comment', {
		  	parentId: item.id,
		  	content: that.repcontent
		  })
		  	.then((res) => {
		  		if(res.status === 'success') {
		  			that.$axios.alert('回复成功', function() {
						that.repcontent = ''
						that.idstate = ''
		  				that.getData()
		  			})
		  		} else {
		  			that.$axios.messageTwo(res.msg, '提示')
		  		}
		  	})
	  }
  },
  mounted () {
  	this.getData()
  }
}
</script>

<style>
	.banner2{
	  width: 100%;
		height: 188px;
	}
	.banner2 img{
	  width: 100%;
	}
	.setforum-btn2{
		display: block;
		width: 100%;
		height: 84px;
		margin-top: 20px;
		background: #0391FF;
		font-size: 26px;
		color: #fff;
		text-align: center;
		line-height: 84px;
		border-radius: 5px;
	}
</style>
